<template>
    <!-- 个人中心弹窗 -->
    <uni-popup ref="popup" type="left" @close="onClose" :animation="true" :mask-click="true" @change="onPopupChange">
        <view class="personal-center-content">
            <!-- 用户信息区域 -->
            <view class="user-section">
                <image :src="userStore.avatar" mode="aspectFit" class="user-avatar" @click="handleMenuClick('edithead')"></image>
                <text v-if="!userStore.hasLogin" @click="openLoginModal" class="login-text">登录/注册</text>
                <view v-else class="login-text" @click="handleMenuClick('editName')">{{ userStore.nickname }}</view>
            </view>

            <!-- 左侧菜单区域 -->
            <view class="left-menu">
                <!-- 勋章 -->
                <view class="menu-item" @click="handleMenuClick('badges')" style="height: 240rpx
                ;">
                    <text class="menu-text" v-if="!userStore.hasLogin">勋章</text>
                    <text class="menu-text" style="font-weight: 700;" v-else-if="userStore.userInfo?.level == 0">你还未获得任何勋章</text>
                    <view class="menu-text" v-else-if="userStore.userInfo?.level != 0">
                        <view class="menu-text" style="font-weight: 700;">
                           <text v-if="userStore.userInfo?.level == 1">学习新星</text>
                        </view>
                        <view class="menu-text" style="font-size: 24rpx;color: rgba(0, 0, 0, 0.4);margin-top: 20rpx;">
                            已胜5场
                        </view>
                    </view>
                    <view class="chevron flex ai-c">
                        <image src="/static/xiaoxingxingwuyanliuse.png" mode="aspectFit"
                            style="width: 160rpx;height: 160rpx;margin-right: 20rpx;">
                        </image>
                        <image src="/static/youzhuangjiantyou.png" mode="aspectFit" style="width: 32rpx;height: 32rpx;"></image>
                        <!-- <uni-icons type="right" size="16" color="#999"></uni-icons> -->
                    </view>
                </view>

                <!-- 余额 -->
                <view class="menu-item" @click.stop="handleMenuClick('bill')">
                    <view class="menu-icon">
                        <image src="/static/user_money.png" mode="aspectFit" style="width: 40rpx;height: 40rpx">
                        </image>
                    </view>
                    <text class="menu-text" style="font-size: 28rpx;">余额 <text
                            style="color: rgba(0, 0, 0, 0.4);font-size: 30rpx;">￥{{ userStore.userInfo?.money || 0 }}</text></text>
                    <view class="recharge-btn" @click.stop="handleMenuClick('recharge')">充值</view>
                </view>

                <!-- 答题记录 -->
                <view class="menu-item" @click="handleMenuClick('records')">
                    <view class="menu-icon">
                        <image src="/static/user_xinxi.png" mode="aspectFit" style="width: 40rpx;height: 40rpx;">
                        </image>
                    </view>
                    <text class="menu-text" style="font-size: 28rpx;">答题记录</text>
                    <view class="chevron">
                        <uni-icons type="right" size="16" color="#999"></uni-icons>
                    </view>
                </view>

                <!-- 我的积分 -->
                <view class="menu-item" @click="handleMenuClick('points')">
                    <view class="menu-icon">
                        <image src="/static/user_deijia.png" mode="aspectFit" style="width: 40rpx;height: 40rpx;">
                        </image>
                    </view>
                    <text class="menu-text" style="font-size: 28rpx;">我的积分 <text
                            style="color: rgba(0, 0, 0, 0.4);">{{ userStore.userInfo?.score || 0 }}</text></text>
                    <view class="chevron">
                        <uni-icons type="right" size="16" color="#999"></uni-icons>
                    </view>
                </view>

                <!-- 公告 -->
                <view class="menu-item" @click="handleMenuClick('announcements')">
                    <view class="menu-icon">
                        <image src="/static/user_laba.png" mode="aspectFit" style="width: 40rpx;height: 40rpx;">
                        </image>
                    </view>
                    <view class="menu-text flex ai-c" style="font-size: 28rpx;">公告 <view class="notification-dot">
                        </view>
                    </view>

                    <view class="chevron" v-if="userStore.gong > 0">
                        <uni-icons type="right" size="16" color="#999"></uni-icons>
                    </view>
                </view>

                <!-- 答题规则 -->
                <view class="menu-item" @click="handleMenuClick('rules')">
                    <view class="menu-icon">
                        <image src="/static/user_rewulan.png" mode="aspectFit" style="width: 40rpx;height: 40rpx;">
                        </image>
                    </view>
                    <text class="menu-text" style="font-size: 28rpx;">答题规则</text>
                    <view class="chevron">
                        <uni-icons type="right" size="16" color="#999"></uni-icons>
                    </view>
                </view>
            </view>

            <!-- 底部按钮 -->
            <view class="bottom-buttons">
                <view class="menu-item flex jc-c" @click="handleMenuClick('help')">帮助</view>
                <view class="menu-item flex jc-c" @click="handleMenuClick('settings')">设置</view>
            </view>
        </view>
    </uni-popup>
    <!-- 登录组件 -->
    <login ref="loginComponent" />
</template>

<script setup>
import { ref, onUnmounted } from 'vue'
import login from './login.vue'
import api from '@/api'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/index.js'

const userStore = useUserStore()
const popup = ref(null)
const loginComponent = ref(null)
// 打开个人中心
const openPersonalCenter = () => {
    uni.hideTabBar()
    popup.value.open()
}

const onClose = () => {
    uni.showTabBar()
}

const onPopupChange = (event) => {
    if (!event.show) {
        uni.showTabBar()
    }
}

onLoad(() => {
    // 如果用户已登录，获取最新用户信息
    if (userStore.hasLogin) {
        api.getUserInfo({
            user_id: userStore.userInfo?.id
        }).then(res => {
            userStore.setUserInfo(res.data)
        })
    }
})

// 打开登录弹窗
const openLoginModal = () => {
    uni.hideTabBar()
    loginComponent.value.openLogin()
}

// 处理菜单点击
const handleMenuClick = (type) => {
    console.log('点击菜单:', type)
    // 这里可以添加具体的业务逻辑
    switch (type) {
        case 'bill':
            uni.navigateTo({ url: '/pages/index/bill/bill' })
            break
        case 'recharge':
            uni.navigateTo({ url: '/pages/index/balanceRecharge/balanceRecharge' })
            break
        case 'badges':
            uni.navigateTo({ url: '/pages/index/medal/medal' })
            break
        case 'records':
            uni.navigateTo({ url: '/pages/index/dtRecord/dtRecord' })
            break
        case 'points':
            uni.navigateTo({ url: '/pages/index/myPoints/myPoints?score=' + userStore.userInfo?.score })
            break
        case 'announcements':
            uni.navigateTo({ url: '/pages/index/announcement/index' })
            break
        case 'rules':
            uni.navigateTo({ url: '/pages/index/announcement/answeringRules' })
            break
        case 'help':
            uni.navigateTo({ url: '/pages/index/announcement/help' })
            break
        case 'settings':
            uni.navigateTo({ url: '/pages/index/announcement/set' })
            break
        case 'editName':
            uni.navigateTo({ url: '/pages/index/announcement/editName' })
            break
			case 'edithead':
			    uni.navigateTo({ url: '/pages/index/announcement/set' })
			    break
    }
}

// 处理区域点击
const handleZoneClick = (zone) => {
    console.log('选择区域:', zone)
    uni.showToast({ title: `选择了${zone}`, icon: 'none' })
}

defineExpose({
    openPersonalCenter
})

onUnmounted(() => {
    uni.showTabBar()
})
</script>

<style lang="scss" scoped>
.personal-center-content {
    width: 530rpx;
    height: 100vh;
    background: #f7f7f7;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 30rpx;
    box-sizing: border-box;
}

.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 32rpx;
    background: #f5f5f5;

    .time {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
    }

    .status-icons {
        display: flex;
        gap: 10rpx;

        .signal,
        .wifi,
        .battery {
            width: 20rpx;
            height: 20rpx;
            background: #333;
            border-radius: 2rpx;
        }
    }
}

.user-section {
    display: flex;
    align-items: center;
    padding: 32rpx;
    background: #f5f5f5;
    cursor: pointer;
    transition: background-color 0.2s ease;

    &:active {
        background: #e8e8e8;
    }

    .user-avatar {
        width: 32rpx;
        height: 42rpx;
        margin-right: 20rpx;
    }

    .login-text {
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.9);
    }
    .login-text {
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.9);
    }
}

.left-menu {
    flex: 1;
    padding: 0 32rpx;


}

.menu-item {
    display: flex;
    align-items: center;
    background: white;
    margin-bottom: 24rpx;
    padding: 24rpx;
    border-radius: 26rpx;

    .menu-icon {
        display: flex;
        align-items: center;
        margin-right: 22rpx;
    }

    .menu-text {
        flex: 1;
        font-size: 28rpx;
        color: #333;
        font-weight: 700;
    }

    .chevron {
        color: #999;
        font-size: 24rpx;
    }

    .recharge-btn {
        width: 96rpx;
        height: 48rpx;
        background: #0F50DC;
        color: white;
        border-radius: 40rpx;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .notification-dot {
        width: 12rpx;
        height: 12rpx;
        background: #ff3b30;
        border-radius: 50%;
        margin-left: 10rpx;
    }
}

.bottom-buttons {
    display: flex;
    gap: 24rpx;
    padding: 23rpx 32rpx;
    .menu-item {
        flex: 1;
        border: none;
        border-radius: 24rpx;
        text-align: center;
        font-size: 28rpx;
        color: #333;
        font-weight: 700;
    }
}

.right-panel {
    position: absolute;
    right: -200rpx;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 20rpx;

    .zone-card {
        width: 160rpx;
        height: 160rpx;
        border-radius: 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.2s ease;

        &:hover {
            transform: scale(1.05);
        }

        .zone-icon {
            font-size: 60rpx;
            margin-bottom: 10rpx;
        }

        .zone-text {
            font-size: 24rpx;
            color: white;
            font-weight: bold;
        }
    }

    .expert-zone {
        background: linear-gradient(135deg, #32d74b, #28a745);
    }

    .intermediate-zone {
        background: linear-gradient(135deg, #af52de, #8e44ad);
    }

    .dynamic-zone {
        background: linear-gradient(135deg, #5ac8fa, #007aff);
    }

    .knowledge-zone {
        background: linear-gradient(135deg, #ff9500, #ff6b35);
    }
}

// 响应式设计
@media (max-width: 750rpx) {
    .personal-center-content {
        width: 100vw;
    }

    .right-panel {
        right: -150rpx;

        .zone-card {
            width: 120rpx;
            height: 120rpx;

            .zone-icon {
                font-size: 40rpx;
            }

            .zone-text {
                font-size: 20rpx;
            }
        }
    }
}
</style>
